<template>
    <div class="h100 box-sizing">
        <e-table
            ref="eTableRef" class="w100"
            pageName="systemUserPage" maxHeight="calc(100vh - 360px)"
            :requestApi="systemUserListApi" :columns="columns">
            <template #header-left="{ ids, list, isSelected }">
                <div class="page-header d-flex ai-center">
                    <e-popover ref="addPopover" @show="show" @handleSure="handleActionUser('add', 'addPopover')">
                        <template #button>
                            <div class="text-center cur-pointer">
                                <ft-icon name="el-icon Plus" size="24" color="#E0641C"></ft-icon>
                                <div>添加</div>
                            </div>
                        </template>
                        <template #content>
                            <modify ref="modifyRef"/>
                        </template>
                    </e-popover>
                    <e-popover ref="editPopover" :disabled="list.length != 1" @show="editShow(list)" @handleSure="handleActionUser('edit', 'editPopover')">
                        <template #button>
                            <div class="ml-50 text-center cur-pointer" @click="list.length > 1 || list.length == 0 ? proxy.$modal.msgError('只能选择一条数据编辑') : ''">
                                <ft-icon name="el-icon EditPen" size="24" color="#E0641C"></ft-icon>
                                <div>修改</div>
                            </div>
                        </template>
                        <template #content>
                            <modify ref="modifyRef"/>
                        </template>
                    </e-popover>
                    <div class="ml-50 text-center cur-pointer" @click="handleDelList(ids)">
                        <ft-icon name="el-icon CloseBold" size="24" color="#E0641C"></ft-icon>
                        <div>删除</div>
                    </div>
                </div>
            </template>
            <template #name="{ row }">
                <div class="row-name d-flex ai-center">
                    <img :src="row.avatar" alt="" class="avatar-img mr-13">
                    <span>{{ row.username }}</span>
                </div>
            </template>
            <template #dept="{row}">
                <span>{{ deptMap[row.dept] }}</span>
            </template>
            <template #password="{ row }">
                <span>{{ setPassword(row.password) }}</span>
            </template>
            <template #action="{ row, index }">
                <div>
                    <e-button :disabled="row.id == 1" link @click="handleDelList([row.id])">删除</e-button>
                    <e-popover :ref="`rowEditPopover${index}`" placement="left-end" @show="editShow([row])" @handleSure="handleActionUser('edit', `rowEditPopover${index}`)">
                        <template #button>
                            <e-button :disabled="row.id == 1" link>修改</e-button>
                        </template>
                        <template #content>
                            <modify ref="modifyRef" type="edit"/>
                        </template>
                    </e-popover>
                    <e-button :disabled="row.id == 1" link @click="handleDelList([row.id])">授权</e-button>
                </div>
            </template>
        </e-table>
    </div>
</template>
<script setup>
import { systemUserListApi, systemAddUserApi, systemEditUserApi, systemDelUserApi } from "@/api/modules/system";
import { useHandleData } from "@/hooks/useHandleData";
import modify from "./components/modify.vue";
const deptMap = { 0: '超级管理员', 1: '运营部', 2: '技术部', 3: '美编部', 4: '销售部', 5: '管理部', 6: '财务部', 7: '补能部', 8: '人事部' };
const eTableRef = ref(null);
const modifyRef = ref(null);
const { proxy } = getCurrentInstance();
// 点击新增打开弹窗时的事件
const show = () => {
    modifyRef.value.reset('add');
    modifyRef.value.resetForm();
}
// 点击修改打开弹窗时的事件
const editShow = (list) => {
    if (list.length > 1) {
        return proxy.$modal.msgError('只能选择一条数据编辑');
    }
    modifyRef.value.reset('edit', list[0]);
}
// 新增 与 修改
const handleActionUser = async(type, popRef) => {
    try {
        const validate =await modifyRef.value.validate();
        if (validate) {
            const api = type === 'edit'? systemEditUserApi : systemAddUserApi;
            const res = await api(modifyRef.value.getFormData());
            proxy.$modal.msgSuccess(res.message);
            proxy.$refs[popRef].close();
        } else {
            proxy.$refs[popRef].closeLoading();
        }
    } finally {
        eTableRef.value.refresh();
    }
}
const columns = [
    {
        type: "selection"
    },
    {
        type: "index",
        label: "编号",
        width: 80
    },
    {
        label: "头像/昵称",
        prop: "name"
    }, {
        label: "所属部门",
        prop: "dept"
    }, {
        label: "联系手机号",
        prop: "phone"
    }, {
        label: "登录密码",
        prop: "password"
    }, {
        label: "备注信息",
        prop: "remark"
    }, {
        label: "编辑修改",
        prop: 'action'
    }
]
const setPassword = (password) => {
    return password.replace(/./g, '●');
}
// 删除
const handleDelList = async(ids) => {
    if (ids.length === 0) {
        return proxy.$modal.msgError('请选择要删除的数据');
    }
    try {
        await useHandleData(systemDelUserApi, ids, "删除后无法恢复，请慎重考虑");
    } finally {
        eTableRef.value.refresh();
    }
}
</script>

<style lang="scss" scoped>
.row-name {
    font-weight: 500;
    font-size: 16px;
    color: $light-color;
}
.avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}
</style>